'use strict'

$(function () {
    // console.log('林同学');
    $.get('http://localhost:8000/product', (data) => {
        render(data)
    })
})

// 查找功能
function find() {
    /*
        1.拿到关键字，
        2.向后端发送请求，获得列表数据
        3.根据关键字，再获得列表数据中过滤符合条件的数据，获得过滤后数据
        4.使用js来操作原来的页面元素，使之呈现出我们需要的效果
    */

    // 1.拿到关键字，
    let keyword = $('#keyword').val()
    if (keyword) {
        $.get(`http://localhost:8000/product`, data => {
            // console.log(data);
            // 3.根据关键字，再获得列表数据中过滤符合条件的数据，获得过滤后数据
            Query()

            // 4.用js操作DOM节点元素
            // 4.1 使用juery获得所有数据区域的行元素
            // 4.2 干掉
            // 4.3 遍历筛选的数据，将数据插入到原表格中，这里的表格使用id=tbData
            render(data)
        })
    } else {
        $.get(`http://localhost:8000/product`, data => {
            // console.log(data);
            // 3.根据关键字，再获得列表数据中过滤符合条件的数据，获得过滤后数据
            Query()
            // 4.用js操作DOM节点元素
            // 4.1 使用juery获得所有数据区域的行元素
            // 4.2 干掉
            // 4.3 遍历筛选的数据，将数据插入到原表格中，这里的表格使用id=tbData
            let row = $('.rowData')
            // row.remove()
            render(data)
        })
    }
    console.log(keyword);
}

function Query() {
    let keyword = $('#keyword').val()
    getJsonResult().then(data => {
        if (keyword) {
            let arr = data.filter(item => {
                return item.id == keyword || item.name == keyword || item.date == keyword
            })
            render(arr)
        } else {
            render(data)
        }
    })
}

function getJsonResult() {
    return new Promise(function (res, rej) {
        $.get(`http://localhost:8000/product`, data => {
            res(data)
        })
    });
}

// 显示页面数据
function render(arr) {
    let row = $('.rowData')
    let tb = $('#tb');
    row.remove()
    arr.forEach(item => {
        let html = `
        <tr class = "rowData">
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.date}</td>
            <td>
                <input type="button" value="编辑" onclick="Edit(${item.id})">
                <input type="button" value="删除" onclick="Delete(${item.id})">
            </td>
        </tr>       
    `
        tb.append(html)
    })
}

// 增加
function add(){
    window.location.href = './add.html'
}

// 新增页面的 增加按钮
function refer(){
    // 获取新增输入框的值
    let name = $('[name = season]').val()
    let date = $('[name = date]').val()
    let obj = {
        name,date
    }
    // 发送 post请求 
    $.post('http://localhost:8000/product',obj,data=>{
        render(data)
        // 返回页面
        window.location.href = './index.html'
    })
}
// 新增页面的 取消按钮
function cancel(){
    window.location.href = './index.html'
}

// 删除功能
function Delete(id) {
    console.log(id);
    $.ajax({
        type:'delete',
        url:`http://localhost:8000/product/${id}`,
        success:data=>{
            render(data)
        }
    })

}

// 编辑功能
function Edit(id) {
    console.log(id);
}